<template>
  <div>
    <div class="details_nav">
      <p @click="back" class="iconfont icon-fanhui"></p>
      <div class="details_cons">
        <img width="30%" :src="details.data.shopInfo.shopPic" alt />
        <div class="details_cons_right">
          <p>46分钟 | 3.0km</p>
          <p>{{details.data.shopInfo.deliveryMsg}}</p>
        </div>
      </div>
    </div>

    <div class="details_bottom">
      <p class="bottom_nav">
        <span
          @click="onClick(index)"
          v-for="(item,index) in navTab"
          :key="index"
          :class="index==selIndex?'nav_active':'no_active'"
        >{{item}}</span>
      </p>
    </div>

    <div class="details_container">
      <div class="details_left">
        <p
          @click="clickLeft(item,index)"
          :class="index==leftIndex?'active':'noactive'"
          v-for="(item,index) in details.data.categoryList"
          :key="index"
        >{{item.categoryName}}</p>
      </div>

      <div class="details_right">
        <div class="right_block" v-for="(item,index) in right" :key="index">
          <img width="35%" height="66px" :src="item.bigImageUrl" alt />
          <div class="block_cons">
            <h4 class="van-ellipsis">{{item.spuName}}</h4>
            <p>{{item.unit}}</p>
            <p class="block_price">
              <span class="price">￥{{item.originPrice}}</span>
              <span @click="addCart(item)" class="num">＋</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="details_footer">
      <span @click="showCart" class="iconfont icon-gouwuche"></span>
      <p class="cart_footer">
        <span>另需配送费￥10</span>
        <span>￥25起送</span>
      </p>
    </div>

    <van-popup v-model="show" position="bottom">
      <div class="cart">
        <p class="cart_p">
          <span>购物车</span>
          <span>
            <span class="iconfont icon-shanchu2"></span> 清空购物车
          </span>
        </p>

        <div class="cart_cons">
          <div class="card" v-for="(item,index) in cart" :key="index">
            <h4>{{item.carts.spuName}}</h4>
            <p>{{item.carts.unit}}</p>
            <p class="cart_price">
              <span class="price">￥{{item.carts.originPrice}}</span>
              <van-stepper @change="onChange" v-model="item.num" />
            </p>
          </div>
        </div>
      </div>

      <div class="details_footer">
        <span @click="showCart" class="iconfont icon-gouwuche"></span>
        <div class="cart_footer_right">
          <p class="total">
            <span class="money">￥{{0}}</span>
            <span>另需配送费￥10</span>
          </p>
          <span class="goprice">去结算</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navTab: ["点菜", "评价", "商家"],
      selIndex: 0,
      leftIndex: 0,
      right: [],
      show: false
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.$store.dispatch("getDetails", id);
  },
  computed: {
    details: function() {
      return this.$store.state.details;
    },
    cart: function() {
      return this.$store.state.cart;
    },
    money:function () {
      return this.$store.statre.money;
    }
  },
  methods: {
    back() {
      window.history.back();
    },
    onClick(index) {
      this.selIndex = index;
    },
    clickLeft(item, index) {
      this.right = item.spuList;
      console.log(this.right);
      this.leftIndex = index;
    },
    showCart() {
      this.show = true;
      this.$store.dispatch('showCart')
    },
    addCart(item) {
      console.log(item);
      this.$store.dispatch("addCart", item);
    },
    onChange() {
      this.$store.dispatch('onChange');
    }
  }
};
</script>

<style scoped>
.details_nav {
  width: 100%;
  height: 150px;
  background-color: #272830;
  overflow: hidden;
}
.icon-fanhui {
  color: #fff;
  font-size: 20px;
  margin: 15px;
}
.details_cons {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
}
.details_cons_right {
  width: 66%;
  color: #fff;
  font-size: 14px;
}
.bottom_nav {
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom_nav span {
  padding: 5px 0px;
}
.nav_active {
  color: #999;
  border-bottom: 3px solid rgb(241, 196, 80);
}
.no_active {
  color: #000;
}
.details_container {
  width: 100%;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.details_left {
  width: 30%;
  height: 370px;
  overflow: auto;
  border-right: 1px solid lightgrey;
  box-sizing: border-box;
  padding: 0px 5px;
}
.details_left p {
  font-size: 16px;
  padding: 15px 5px;
  text-align: center;
}
.active {
  color: rgb(241, 196, 80);
  border-left: 3px solid rgb(241, 196, 80);
}
.details_right {
  width: 70%;
  height: 370px;
  overflow: auto;
  /* border: 1px solid red; */
}
.right_block {
  width: 100%;
  /* border: 1px solid #000; */
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.block_cons {
  width: 63%;
  /* border: 1px solid red; */
  line-height: 25px;
}
.block_price {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 5px;
}
.price {
  font-weight: 550;
  color: red;
  font-size: 18px;
}
.num {
  display: inline-block;
  background-color: rgb(241, 196, 80);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  font-weight: 550;
  font-size: 18px;
}
.details_footer {
  width: 100%;
  height: 50px;
  border-top: 1px solid lightgrey;
  position: fixed;
  bottom: 0px;
  background-color: #272830;
  z-index: 9;
}
.icon-gouwuche {
  padding: 10px;
  color: #fff;
  font-size: 36px;
  border-radius: 50%;
  background-color: #1c1d22e5;
  position: fixed;
  bottom: 15px;
  left: 15px;
}
.cart_footer {
  color: #999;
  width: 68%;
  display: flex;
  justify-content: space-between;
  margin-left: 100px;
  line-height: 50px;
}
.cart {
  width: 100%;
  border: 1px solid red;
  margin-bottom: 60px;
}
.cart_p {
  width: 100%;
  height: 40px;
  background-color: #efefef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 10px;
}
.cart_cons {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 5px 10px;
}
.card {
  margin-top: 10px;
  box-sizing: border-box;
  padding: 5px 0px;
  border-top: 1px solid #999;
}
.cart_price {
  display: flex;
  justify-content: space-between;
}
.cart_footer_right {
  width: 75%;
  height: 100%;
  border: 1px solid #fff;
  margin-left: 25%;
  display: flex;
  justify-content: space-between;
}
.goprice {
  display: inline-block;
  width: 40%;
  height: 100%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(243, 193, 65);
}
.total {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    padding: 2px 5px;
}
.money {
    font-size: 18px;
}
</style>